<template>
  <div class="section-container">
    <div class="section-title">
      密码安全
    </div>
    <div class="section-actions">
      <div class="actions-left">
        <el-button v-permission="['setting:security:password:add']" type="primary" @click="handleAdd">添加策略</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <RuifoxTable :loading="tableLoading" :default-index="true" :default-checkbox="false" v-model:tableData="tableData" v-model:fieldList="fieldList">
      <template #updateTime="{ element }">
        <span>{{ element.updateTime ? dayjs(element.updateTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
      </template>
      <template #option="{ element }">
        <el-button v-permission="['setting:security:password:edit']" type="primary" link @click="handleEdit(element)">编辑</el-button>
      </template>
    </RuifoxTable>

    <!-- 分页 -->
    <div class="header-page">
      <PaginationView
        :total="queryData.total"
        :pageSize="queryData.pageSize"
        :currentPage="queryData.currentPage"
        :canChoose="false"
        @currentChange="handleCurrentChange"
        @changeSize="handleSizeChange"
        @refreshList="getTableData"
      />
    </div>

    <!-- 添加/编辑弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="策略" prop="name">
          <el-input v-model="formData.name" placeholder="请输入策略"></el-input>
        </el-form-item>
        <el-form-item label="字段" prop="title">
          <el-input v-model="formData.title" placeholder="请输入字段"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-model="formData.value" placeholder="请输入值"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { tableList as mixTable } from '@ruifox-cms/utils'
import { insertSystemSetting, selectPageSystemSetting, updateSystemSetting } from '@/api/setting'
import dayjs from 'dayjs'

// 使用mixTable混入
const { queryData, tableData, tableLoading, getTableData, handleCurrentChange, handleSizeChange } = mixTable({
  getListApi: selectPageSystemSetting
})

// 表格字段配置
const fieldList = ref([
  {
    title: '策略',
    name: 'name'
  },
  {
    title: '字段',
    name: 'title'
  },
  {
    title: '值',
    name: 'value'
  },
  {
    title: '更新时间',
    name: 'updateTime'
  },
  {
    title: '操作',
    name: 'option',
    width: 150
  }
])

// 弹窗相关
const dialogVisible = ref(false)
const dialogTitle = ref('添加策略')
const formRef = ref(null)

// 表单数据
const defaultFormData = reactive({
  id: '',
  title: '',
  name: '',
  value: ''
})
const formData = reactive(Object.assign({}, defaultFormData))

// 表单验证规则
const rules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  value: [{ required: true, message: '请输入值', trigger: 'blur' }]
}

// 编辑按钮点击
const handleEdit = (row) => {
  dialogTitle.value = '编辑策略'
  dialogVisible.value = true
  // 复制数据到表单
  Object.assign(formData, row)
}

// 添加按钮点击
const handleAdd = () => {
  dialogTitle.value = '添加策略'
  dialogVisible.value = true
  // 重置表单数据
  Object.assign(formData, defaultFormData)
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async valid => {
    if (valid) {
      try {
        // 根据是否有id判断是新增还是编辑
        if (formData.id) {
          await updateSystemSetting(formData)
        } else {
          await insertSystemSetting(formData)
        }
        dialogVisible.value = false
        getTableData() // 刷新表格数据
      } catch (error) {
        console.error(error)
      }
    }
  })
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">
.setting-content {
  h2 {
    font-weight: normal;
    margin-bottom: 20px;
    strong {
      font-size: 18px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
}

.operation-bar {
  margin-bottom: 15px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
